<template>
  <div class="tb"> 
    <mt-field label="车牌号:" placeholder="请输入" type="text" v-model="fzdcbfd12019001"></mt-field>
    <mt-field label="车牌颜色:" placeholder="请输入" type="text" :readonly="true" v-model="currentTagsColor.name" @click.native.capture="choseColor"></mt-field>
    <mt-field label="日期:" placeholder="请输入起止日期(如：2-6)" type="text" v-model="fzdcbfd12019002"></mt-field>
    <mt-field label="趟次序号:" placeholder="请输入" type="number" v-model="fzdcbfd12019003"></mt-field>
    <mt-field label="趟次数(个):" placeholder="请输入" type="number" v-model="fzdcbfd12019004"></mt-field>
    <mt-field label="起点:" placeholder="请输入" type="text" v-model="startInfo" :readonly="true" @click.native.capture="showStart1"></mt-field>
    <mt-field label="终点:" placeholder="请输入" type="text" v-model="endInfo" :readonly="true" @click.native.capture="showStart2"></mt-field>
    <!-- 修改货物种类为枚举类型 显示为名称，上传数据库为代码 add qzn 2019 start -->
    <mt-field
      label="货物种类:"
      placeholder="请输入"
      type="text"
      :readonly="true"
      v-model="currentTags.name"
      @click.native.capture="choseHwzl"
    ></mt-field>
    <mt-field label="单趟次运量(吨):" placeholder="请输入" type="number" v-model="fzdcbfd12019008"></mt-field>
    <mt-field label="单趟次货物周转量(吨公里):" placeholder="请输入" type="number" v-model="fzdcbfd12019009"></mt-field>
    <mt-field label="平均运距(公里):" placeholder="请输入" type="number" v-model="fzdcbfd12019010"></mt-field>
    <mt-field label="单趟次集装箱箱运量（TEU）:" placeholder="请输入" type="number" v-model="fzdcbfd12019011"></mt-field>
    <div class="button">
      <mt-button type="primary" size="large" @click="check">确定</mt-button>
    </div>
    <!-- 起点选择器 -->
    <mt-popup
      v-model="popupVisible1"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
    <mt-picker :slots="slotss" @change="onValuesChange1"  value-key="value" showToolbar>
        <mt-header title="选择省市区">
              <mt-button slot="left" class="cancle" @click="popupVisible1 = !popupVisible1">取消</mt-button> 
              <mt-button slot="right" class="sure" @click="sure">确定</mt-button>                       
            </mt-header>   
        </mt-picker> 
    </mt-popup>
    <!-- 终点选择器 -->
    <mt-popup
      v-model="popupVisible2"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
    <mt-picker :slots="slotss" @change="onValuesChange1"  value-key="value" showToolbar>
        <mt-header title="选择省市区">
              <mt-button slot="left" class="cancle" @click="popupVisible2 = !popupVisible2">取消</mt-button> 
              <mt-button slot="right" class="sure" @click="sure1">确定</mt-button>                       
            </mt-header>   
        </mt-picker> 
    </mt-popup>
    <!-- 货物种类选择器 -->
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom">
      <mt-picker :slots="slots"  showToolbar ref="picker" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
          <div class>请选择货物种类</div>
          <div class="usi-btn-sure" @click="handleConfig">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
    <!-- 车牌颜色选择器 -->
    <mt-popup
      v-model="popupVisibleColor"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom">
      <mt-picker :slots="slotsColor"  showToolbar ref="pickerColor" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisibleColor = !popupVisibleColor">取消</div>
          <div class>请选择车牌颜色</div>
          <div class="usi-btn-sure" @click="handleConfigColor">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
  </div>
</template>
    
    <script>
import { Field } from "mint-ui";
import { Picker } from "mint-ui";
import { Popup } from "mint-ui";
import {Toast} from 'mint-ui'

export default {
  data() {
    return {
      //车牌颜色
      fzdcbfd12019029:"",
      //用户名
      userName: "",
      recid: "",
      yhmlk: "",
      fzdcbfd12019001: "",
      fzdcbfd12019002: "",
      fzdcbfd12019003: "",
      fzdcbfd12019004: "",
      fzdcbfd12019005: "",
      fzdcbfd12019006: "",
      fzdcbfd12019007: "",
      fzdcbfd12019008: "",
      fzdcbfd12019009: "",
      fzdcbfd12019010: "",
      fzdcbfd12019011: "",
      showToolbar: true,
      slots: [
        {
          values: []
        }
      ],
      slotsColor: [
        {
          values: [{"code":"1","flag":"Dcq","name":"蓝色"},
          {"code":"2","flag":"Dcq","name":"黄色"},
          {"code":"3","flag":"Dcq","name":"黑色"},
          {"code":"4","flag":"Dcq","name":"白色"},
          {"code":"5","flag":"Dcq","name":"黄绿"},
          {"code":"6","flag":"Dcq","name":"渐变绿"},
          {"code":"9","flag":"Dcq","name":"其他"},]
        }
      ],
      result: '',
      provinceValue: '',
      cityValue: '',
      countyValue: '',
      countyCode: '',
      startInfo:'',
      endInfo:'',
      first: '', 
      second: '', 
      third: '',
      iosProvinces: '',
      iosCitys: '',
      iosCountys: '',
      slotss: [{
                    flex: 1,
                    values: [],
                    className: 'slot1',
                    textAlign: 'left',
                    defaultIndex: 0
                }, {
                    flex: 1,
                    values: [],
                    className: 'slot2',
                    textAlign: 'center',
                    defaultIndex: 0                    
                }, {
                    flex: 1,
                    values: [],
                    className: 'slot3',
                    textAlign: 'right',
                    defaultIndex: 0                    
              }],
      popupVisible: false,
      popupVisibleColor: false,
      popupVisible1: false,
      popupVisible2: false,
      currentTags: {},
      currentTagsColor: {}
    };
  },
  watch: {
    fzdcbfd12019008(newVal) {
        if(newVal != '' && this.fzdcbfd12019010 != ''){
          this.fzdcbfd12019009 = parseFloat(this.fzdcbfd12019010) * newVal;
        }
    },
    fzdcbfd12019009(newVal) {
      if(this.fzdcbfd12019008 != ''){
        this.fzdcbfd12019010 =
                (parseFloat(newVal) / parseFloat(this.fzdcbfd12019008)).toFixed(1);
      }
    },
    fzdcbfd12019010(newVal) {
      if(this.fzdcbfd12019008 != ''){
          this.fzdcbfd12019009 = parseFloat(this.fzdcbfd12019008) * newVal;
      }
    }
  },
  created() {},
  mounted() {},
  props: ['show', 'province', 'city', 'county'],
  methods: {
    // 校验条件
    check(){
      if(this.fzdcbfd12019001 == ''){
          Toast("车牌号码不能为空！");
      } else if(this.fzdcbfd12019029 == ''){
          Toast("车牌颜色不能为空！");
      } else if(this.fzdcbfd12019002 == ''){
          Toast("日期不能为空！");
      } else if(this.fzdcbfd12019002.indexOf("-") == -1 || this.fzdcbfd12019002.length > 5 || this.fzdcbfd12019002.length < 3){
          Toast("日期只能是数字-数字，如2-6！");
      } else if(this.fzdcbfd12019003 == ''){
          Toast("趟次序号不能为空！");
      } else if(this.fzdcbfd12019004 == ''){
          Toast("趟次数不能为空！");
      } else if(this.fzdcbfd12019005 == ''){
          Toast("起点不能为空！");
      } else if(this.fzdcbfd12019006 == ''){
          Toast("终点不能为空！");
      } else if(this.fzdcbfd12019007 == ''){
          Toast("货物种类不能为空！");
      } else if(this.fzdcbfd12019008 == ''){
          Toast("单趟次运量不能为空！");
      } else if(this.fzdcbfd12019009 == '' && this.fzdcbfd12019010 == ''){
          Toast("单趟次货物周转量和平均运距至少有一项不能为空！");
      }
      //  else if(this.fzdcbfd12019008 > 100){
      //     Toast("单趟次运量应小于等于100，请核实！");
      // } else if(this.fzdcbfd12019010 != '' && this.fzdcbfd12019010 > 3500){
      //     Toast("单趟次平均运距应小于等于3500，请核实！");
      // }
       else {
        this.commit();
      }
    },
    commit() {
      this.userName = localStorage.getItem("userName");
      let data = {};
      let fzdcbfd01 = {};
      (fzdcbfd01.recid = this.recid),
        (fzdcbfd01.yhmlk = this.yhmlk = this.$route.query.yhmlk),
        (fzdcbfd01.fzdcbfd12019001 = this.fzdcbfd12019001),
        (fzdcbfd01.fzdcbfd12019029 = this.fzdcbfd12019029),
        (fzdcbfd01.fzdcbfd12019002 = this.fzdcbfd12019002),
        (fzdcbfd01.fzdcbfd12019003 = this.fzdcbfd12019003),
        (fzdcbfd01.fzdcbfd12019004 = this.fzdcbfd12019004),
        (fzdcbfd01.fzdcbfd12019005 = this.fzdcbfd12019005),
        (fzdcbfd01.fzdcbfd12019006 = this.fzdcbfd12019006),
        (fzdcbfd01.fzdcbfd12019007 = this.fzdcbfd12019007),
        (fzdcbfd01.fzdcbfd12019008 = this.fzdcbfd12019008),
        (fzdcbfd01.fzdcbfd12019009 = this.fzdcbfd12019009),
        (fzdcbfd01.fzdcbfd12019010 = this.fzdcbfd12019010),
        (fzdcbfd01.fzdcbfd12019011 = this.fzdcbfd12019011),
        (data.fzdcbfd01 = fzdcbfd01),
        console.log(data);
        this.axios
          .post(
            "http://zxdc.catsic.com:9090/sampling/assit/saveFzdcbfd01",
            { data: data },
            {
              headers: {
                "Content-Type": "application/json",
                mobileHeader:
                  '{"sessionId":' + localStorage.getItem("sessionId") + "}"
              }
            }
          )
          .then(
            result => {
                
              if (result.data.status == "1000") {
                console.log("保存成功");
                this.goback();
              }
            },
            error => {
              console.log("getyhcars request error:" + error);
            }
          );
    },
    // 选择货物种类
    choseHwzl() {
      this.$http.get("http://zxdc.catsic.com:9090/sampling/json/carTyps").then(
        response => {
          console.log("数据加载成功");
          this.slots[0].values = response.data.hwzl;
          // this.slots[0].values = response.body.carType;
          this.popupVisible = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    // 选择车牌颜色
    choseColor() {  
      this.popupVisibleColor = true;
    },
    // 弹出框点击确定按钮点击事件 add by qzn 20190627
    handleConfig: function() {
      this.currentTags = this.$refs.picker.getValues()[0];
      this.fzdcbfd12019007 = this.currentTags.code;
      this.popupVisible = false;
    },
    //车牌颜色
    handleConfigColor: function() {
      this.currentTagsColor = this.$refs.pickerColor.getValues()[0];
      this.fzdcbfd12019029 = this.currentTagsColor.code;
      this.popupVisibleColor = false;
    },
    goback() {
      this.$router.go(-1);
    },
    //
    showStart1(){
      this.axios.get("http://zxdc.catsic.com:9090/sampling/json/city").then(
        response => {
          console.log("数据加载成功");
      
          this.slotss[0].values = response.data.iosProvinces;
          this.iosProvinces = response.data.iosProvinces;
          
          this.slotss[1].values = response.data.iosCitys;
          this.iosCitys = response.data.iosCitys;

          this.slotss[2].values = response.data.iosCountys;
          this.iosCountys = response.data.iosCountys;
          

          this.popupVisible1 = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    showStart2(){
      this.axios.get("http://zxdc.catsic.com:9090/sampling/json/city").then(
        response => {
          console.log("数据加载成功");
          // console.log(response);
          this.slotss[0].values = response.data.iosProvinces;
          this.iosProvinces = response.data.iosProvinces;
          
          this.slotss[1].values = response.data.iosCitys;
          this.iosCitys = response.data.iosCitys;

          this.slotss[2].values = response.data.iosCountys;
          this.iosCountys = response.data.iosCountys;
          

          this.popupVisible2 = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },

    handleConfig1: function() {
      //this.currentTags = this.$refs.picker.getValues()[0];
      //this.fzdcbfd12019007 = this.currentTags.code;
      
    },
    // 传值
        toParent(){
            var show = false;
            var result, province, city, county;
            if(this.province + this.city + this.county){
                result = this.province + this.city + this.county;
                province = this.province;
                city = this.city;
                county = this.county;
            }
            this.$emit('changeValue', {show, result, province, city, county});
        },
        // 点击确定按钮
        sure(){
            var show = false;
            var result = this.result;
            var province = this.provinceValue;
            var city = this.cityValue;
            var county = this.countyValue;
            
            this.startInfo = province+"-"+city+"-"+county;
            this.fzdcbfd12019005 = this.countyCode;
            this.popupVisible1 = false;
            console.log(show,result, province, city, county,"---"+this.fzdcbfd12019005);
        },
        sure1(){
            var show = false;
            var result = this.result;
            var province = this.provinceValue;
            var city = this.cityValue;
            var county = this.countyValue;
            
            this.endInfo = province+"-"+city+"-"+county;
            this.fzdcbfd12019006 = this.countyCode;
            this.popupVisible2 = false;
            // console.log(show,result, province, city, county,"---"+this.fzdcbfd12019006);
        },
    // 筛选器值变化时调用
        onValuesChange1(picker, values) {
            var cityArray = [],
                countyArray = [];
            if(values[0]){          
                for(let i=0; i<this.iosCitys.length; i++){
                    if(values[0].id == this.iosCitys[i].parentId){
                        cityArray.push(this.iosCitys[i]);
                    }
                }
                picker.setSlotValues(1, cityArray); 
            } 

            if(values[1]){                         
                for(let j=0; j<this.iosCountys.length; j++){
                    if(values[1].id == this.iosCountys[j].parentId){
                        countyArray.push(this.iosCountys[j]);
                    }
                }
                picker.setSlotValues(2, countyArray);
            }
            var result = this.result;
            
            if(typeof(values[1]) == 'object' && typeof(values[2]) == 'object'){
                result = values[0].value + values[1].value + values[2].value;
                this.provinceValue = values[0].value;
                this.cityValue = values[1].value;
                this.countyValue = values[2].value;
                this.countyCode = values[2].id;
                
                for(let i=0; i<this.iosProvinces.length; i++){
                    if(this.iosProvinces[i].value == this.province){
                        this.first = i;
                    }
                }
                for(let i=0; i<this.cityArray.length; i++){
                    if(this.city == cityArray[i].value){
                        this.second = i;
                    }
                }
                for(var j=0; j<countyArray.length; j++){
                    if(this.county == countyArray[j].value){
                        this.third = j;
                    }
                }
                this.slotss[0].defaultIndex = parseInt(this.first);
                this.slotss[1].defaultIndex = parseInt(this.second);
            }else if(typeof(values[1]) != 'object' && typeof(values[2]) == 'object'){
                values[1] = this.iosCitys;
                result = values[0].value + this.city + values[2].value;
                this.provinceValue = values[0].value;
                this.cityValue = this.city;
                this.countyValue = values[2].value;
                this.countyCode = values[2].id;
            }
            this.result = result;
        },
  },
  mounted(){
      this.slotss[1].values = [];
      this.slotss[2].values = [];
  },
  updated: function () {
        this.$nextTick(function () {
            // console.log(this.province + this.city + this.county);
            this.slotss[2].defaultIndex = parseInt(this.third);    
        })
    }
};
</script>
    
    <style lang="scss" scoped>
.tb {
  padding-top: 10px;
}

.mint-cell {
  background-color: #efeff4;
}
input[type="number"] {
  line-height: 21px;
  width: 100%;
  height: 40px;
  margin-bottom: 0px;
  padding: 10px 15px;
  -webkit-user-select: text;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  outline: 0;
  background-color: #fff;
  -webkit-appearance: none;
}
.button {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
}
.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 200px;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
}
.usi-btn-cancel,
.usi-btn-sure {
  color: #26a2ff;
}
.mint-popup-bottom {
  width: 100%;
  top: auto;
  right: auto;
  bottom: 0;
}
</style>